﻿<template>
  <s-layout class="team-wrap" title="我的团队">
    <view class="header-section">
      <view class="stats-card">
        <view class="stats-content">
          <view class="stat-item">
            <text class="stat-number">{{ state.teamStats.totalMembers }}</text>
            <text class="stat-label">团队人数</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-number">{{ state.teamStats.activeMembers }}</text>
            <text class="stat-label">活跃成员</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-number">{{ state.teamStats.newMembers }}</text>
            <text class="stat-label">本月新增</text>
          </view>
        </view>、
      </view>
    </view>

    <view class="content-section">
      <view class="section-header">
        <text class="section-title">团队成员</text>
        <view class="member-count">
          <text>共 {{ state.teamList.length }} 人</text>
        </view>
      </view>

      <view class="members-container">
        <s-empty
          v-if="state.teamList.length === 0 && !state.loading"
          icon="/static/data-empty.png"
          text="暂无团队成员"
        ></s-empty>

        <view v-if="state.teamList.length > 0" class="members-list">
          <view
            class="member-item"
            v-for="(member, index) in state.teamList"
            :key="member.id"
          >
            <view class="member-avatar">
              <image
                class="avatar-img"
                :src="member.avatar || '/static/default-avatar.png'"
                mode="aspectFill"
                @error="onAvatarError"
              />
              <view class="level-badge" :class="getLevelClass(member.level)">
                <text class="level-text">{{ getLevelText(member.level) }}</text>
              </view>
            </view>
            
            <view class="member-info">
              <view class="member-basic">
                <text class="member-name">{{ member.nickname || '未设置昵称' }}</text>
                <view class="member-tags">
                  <view class="tag gender" v-if="member.gender">
                    <text>{{ getGenderText(member.gender) }}</text>
                  </view>
                  <view class="tag status" :class="getStatusClass(member.status)">
                    <text>{{ getStatusText(member.status) }}</text>
                  </view>
                </view>
              </view>
              
              <view class="member-details">
                <view class="detail-row">
                  <text class="detail-label">手机号:</text>
                  <text class="detail-value">{{ member.phoneHidden || '未绑定' }}</text>
                </view>
                <view class="detail-row" v-if="member.city || member.province">
                  <text class="detail-label">地区:</text>
                  <text class="detail-value">{{ formatLocation(member) }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">余额:</text>
                  <text class="detail-value balance">¥{{ (member.balance || 0).toFixed(2) }}</text>
                </view>
              </view>
              
              <view class="member-time">
                <text class="join-time">加入时间: {{ formatJoinTime(member.spreadTime) }}</text>
              </view>
            </view>
            
            <view class="member-rank">
              <text class="rank-number">#{{ index + 1 }}</text>
            </view>
          </view>
        </view>

        <uni-load-more
          v-if="state.teamList.length > 0"
          :status="state.loadStatus"
          :content-text="{
            contentdown: '已加载全部',
            contentnomore: '没有更多了'
          }"
        />
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';

  const state = reactive({
    teamList: [],
    loading: false,
    loadStatus: 'noMore',
    teamStats: {
      totalMembers: 0,
      activeMembers: 0,
      newMembers: 0,
    },
  });

  async function getTeamMembers() {
    try {
      state.loading = true;
      state.loadStatus = "loading";
      
      const teamList = await sheep.$api.data.team.getTeams();
      
      if (teamList && Array.isArray(teamList)) {
        state.teamList = teamList;
        calculateStats(teamList);
      } else {
        state.teamList = [];
      }
      
      state.loadStatus = "noMore";
    } catch (error) {
      state.loadStatus = "noMore";
      sheep.$helper.toast('获取团队信息失败');
    } finally {
      state.loading = false;
    }
  }

  function calculateStats(teamList) {
    const now = dayjs();
    const currentMonth = now.format('YYYY-MM');
    
    state.teamStats.totalMembers = teamList.length;
    state.teamStats.activeMembers = teamList.filter(member => member.status === 1).length;
    state.teamStats.newMembers = teamList.filter(member => {
      if (!member.spreadTime) return false;
      return dayjs(member.spreadTime).format('YYYY-MM') === currentMonth;
    }).length;
  }

  function getLevelClass(level) {
    switch (level) {
      case 0: return 'normal';
      case 1: return 'vip';
      case 2: return 'promoter';
      case 3: return 'leader';
      case 4: return 'partner';
      default: return 'normal';
    }
  }

  function getLevelText(level) {
    switch (level) {
      case 0: return '普通';
      case 1: return '充值';
      case 2: return '推手';
      case 3: return '团长';
      case 4: return '合伙';
      default: return '普通';
    }
  }

  function getGenderText(gender) {
    switch (gender) {
      case 1: return '男';
      case 2: return '女';
      default: return '未知';
    }
  }

  function getStatusClass(status) {
    return status === 1 ? 'active' : 'inactive';
  }

  function getStatusText(status) {
    return status === 1 ? '正常' : '禁用';
  }

  function formatLocation(member) {
    const parts = [];
    if (member.province) parts.push(member.province);
    if (member.city && member.city !== member.province) parts.push(member.city);
    return parts.join(' ') || '未知';
  }

  function formatJoinTime(timeStr) {
    if (!timeStr) return '未知';
    return dayjs(timeStr).format('YYYY-MM-DD');
  }

  function onAvatarError(e) {
    e.target.src = '/static/default-avatar.png';
  }

  onLoad(async (options) => {
    await getTeamMembers();
  });
</script>

<style lang="scss" scoped>
  .header-section {
    padding: 30rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .stats-card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20rpx);
      border-radius: 20rpx;
      padding: 30rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.2);
      
      .stats-content {
        display: flex;
        align-items: center;
        justify-content: space-around;
        
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .stat-number {
            font-size: 36rpx;
            font-weight: 700;
            color: white;
            margin-bottom: 8rpx;
            font-family: OPPOSANS;
          }
          
          .stat-label {
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.8);
          }
        }
        
        .stat-divider {
          width: 1rpx;
          height: 60rpx;
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }

  .content-section {
    background: #f8f9fa;
    min-height: calc(100vh - 200rpx);
    
    .section-header {
      background: white;
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #f0f0f0;
      
      .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
      
      .member-count {
        font-size: 26rpx;
        color: #666;
      }
    }
    
    .members-container {
      padding: 20rpx 30rpx;
      
      .members-list {
        
        .member-item {
          background: white;
          border-radius: 20rpx;
          padding: 30rpx;
          margin-bottom: 20rpx;
          display: flex;
          align-items: flex-start;
          box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
          border: 1rpx solid #f1f3f4;
          position: relative;
          
          .member-avatar {
            position: relative;
            margin-right: 24rpx;
            
            .avatar-img {
              width: 100rpx;
              height: 100rpx;
              border-radius: 50%;
              border: 3rpx solid #fff;
              box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
            }
            
            .level-badge {
              position: absolute;
              bottom: -6rpx;
              right: -6rpx;
              padding: 4rpx 12rpx;
              border-radius: 20rpx;
              border: 2rpx solid white;
              
              &.normal {
                background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
              }
              
              &.vip {
                background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
              }
              
              &.promoter {
                background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
              }
              
              &.leader {
                background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
              }
              
              &.partner {
                background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
              }
              
              .level-text {
                font-size: 20rpx;
                color: white;
                font-weight: 600;
              }
            }
          }
          
          .member-info {
            flex: 1;
            
            .member-basic {
              margin-bottom: 16rpx;
              
              .member-name {
                font-size: 32rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 8rpx;
                display: block;
              }
              
              .member-tags {
                display: flex;
                gap: 12rpx;
                
                .tag {
                  padding: 4rpx 12rpx;
                  border-radius: 12rpx;
                  font-size: 22rpx;
                  
                  &.gender {
                    background: #e8f4fd;
                    color: #1890ff;
                  }
                  
                  &.status {
                    &.active {
                      background: #f6ffed;
                      color: #52c41a;
                    }
                    
                    &.inactive {
                      background: #fff2f0;
                      color: #ff4d4f;
                    }
                  }
                }
              }
            }
            
            .member-details {
              margin-bottom: 12rpx;
              
              .detail-row {
                display: flex;
                margin-bottom: 8rpx;
                
                .detail-label {
                  font-size: 26rpx;
                  color: #666;
                  width: 120rpx;
                }
                
                .detail-value {
                  font-size: 26rpx;
                  color: #333;
                  flex: 1;
                  
                  &.balance {
                    color: #52c41a;
                    font-weight: 600;
                    font-family: OPPOSANS;
                  }
                }
              }
            }
            
            .member-time {
              .join-time {
                font-size: 24rpx;
                color: #999;
              }
            }
          }
          
          .member-rank {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            
            .rank-number {
              font-size: 24rpx;
              color: #999;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
</style> 
